<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.绘制圆角矩形</title>
  <link rel="stylesheet" href="../common.css">
</head>

<body>
  <script>
    var canvas = document.createElement("canvas");
    var canW = canH = 600;
    canvas.width = canW;
    canvas.height = canH;
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");


    var w = 500;
    var h = 300; //矩形的宽高
    var x = canW / 2 - w / 2; //开始的x轴坐标
    var y = canH / 2 - h / 2; //开始的y轴坐标
    var r = 15; //圆角半径
    var bdWidth = 2; //边框宽度
    var bdColor = "#000000"; //边框的颜色
    var bgcolor = "#FFDAB9"; //矩形背景的颜色

    drawRoundedRect(x, y, w, h, r, bdWidth, bdColor, bgcolor);

    function drawRoundedRect(x, y, w, h, r, bdWidth, bdColor, bgcolor) {
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.lineWidth = bdWidth;
      ctx.strokeStyle = bdColor;
      ctx.fillStyle = bgcolor;
      ctx.lineTo(x + w - r, y);
      ctx.arcTo(x + w - r, y + r, x + w, y + r, r);
      ctx.lineTo(x + w, y + h - r);
      ctx.arcTo(x + w - r, y + h - r, x + w - r, y + h, r);
      ctx.lineTo(x + r, y + h);
      ctx.arcTo(x + r, y + h - r, x, y + h - r, r);
      ctx.lineTo(x, y + r);
      ctx.arcTo(x + r, y + r, x + r, y, r);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();
    }
  </script>
  </script>
</body>

</html>